<template>
    <div>
        <el-card class="!border-none mt-4" shadow="never">
            <el-descriptions
                :column="1"
                :size="size"
                :style="blockMargin"
                v-for="(item, index) in dataList"
                :key="index"
                :title="item.version_no"
            >
                <el-descriptions-item label="发布于">
                    {{ item.create_time }}
                </el-descriptions-item>
                <el-descriptions-item
                    v-for="(citem, cindex) in item.version_description"
                    :key="cindex"
                >
                    <el-tag
                        size="small"
                        :type="VersionTagsEnum[citem.descType]"
                        >{{ UpdateVersionTagsEnumMap[citem.descType] }}</el-tag
                    >
                    {{ citem.descValue }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <el-divider />
                </el-descriptions-item>
            </el-descriptions>
            <div class="flex justify-end mt-4">
                <!-- <pagination v-model="pager" @change="getLists" /> -->
                <el-pagination
                    v-model:current-page="currentPage"
                    :page-sizes="[2, 10, 20, 50, 100]"
                    :background="true"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { getUpdateRecord } from "@/api/cloudupdate";
import { ElMessage, ElLoading, ElTag, ElDivider } from "element-plus";
import { UpdateVersionTagsEnumMap, VersionTagsEnum } from "@/enums/appEnums";

const props = defineProps({
    app: {
        type: String,
        default: "",
    },
});
const currentPage = ref(1);
const pageSize = ref(20);
const total = ref(0);
const handleSizeChange = (val: number) => {
    getDataList(currentPage.value);
    console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
    getDataList(val);
    console.log(`current page: ${val}`);
};
const size = ref("");
const blockMargin = computed(() => {
    const marginMap = {
        large: "32px",
        default: "28px",
        small: "24px",
    };
    return {
        marginTop: marginMap[size.value] || marginMap.default,
    };
});

const dataList = ref<any[]>([]);
const getDataList = (page: number) => {
    getUpdateRecord({ page: page, app: props.app })
        .then((res) => {
            if (res.data.data) {
                dataList.value = res.data.data;
                total.value = res.data.total;
            }
        })
        .catch((ret) => {});
};
getDataList(currentPage.value);
</script>

<style scoped>
.el-descriptions {
    margin-top: 20px;
}
</style>
